<template>
  <div class="person">
    <div class="tubiao1">
      <div class="touxiang">
        <img src="../../../assets/wechatimgs/tx.png" alt="" />
      </div>
      <div class="xiaoxi">
        <img src="../../../assets/wechatimgs/消息.png" alt="" />
      </div>
      <div class="lianxiren">
        <img src="../../../assets/wechatimgs/我的关注.png" alt="" />
      </div>
      <div class="faxian">
        <img src="../../../assets/wechatimgs/发现.png" alt="" />
      </div>
      <div class="pengyouquan">
        <img src="../../../assets/wechatimgs/朋友圈.png" alt="" />
      </div>
    </div>
    <div class="tubiao2">
      <div class="shouji">
        <img src="../../../assets/wechatimgs/手机.png" alt="" />
      </div>
      <div class="shezhi">
        <img src="../../../assets/wechatimgs/设置.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PerSon",
};
</script>

<style lang="scss" scoped>
.person {
  width: 100%;
  height: 90%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;
  padding: 20px 0;
  .tubiao1 {
    gap: 30px;
    display: flex;
    align-items: center;
    flex-direction: column;
    .touxiang {
      width: 50px;
      height: 50px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .xiaoxi {
      width: 30px;
      height: 30px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .lianxiren {
      width: 30px;
      height: 30px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .faxian {
      width: 30px;
      height: 30px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .pengyouquan {
      width: 30px;
      height: 30px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  .tubiao2 {
    gap: 30px;
    display: flex;
    align-items: center;
    flex-direction: column;
    .shouji {
      width: 30px;
      height: 30px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .shezhi {
      width: 30px;
      height: 30px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}
</style>
